<template>
    <div class="bg" style="overflow: hidden">
        <div class="share-content" id="capture" v-show="showQrcode">
            <div class="top-content" id="share_Style">
                <!-- <p class="text text-name">我是商家</p>
                <p class="text text-dy">我为首象代言</p> -->
                <vue-qr  :logoSrc="src2" :text="text" :size="180" :margin="0"   id="ewm" :logoScale="0.3"  :whiteMargin="true" :callback="test"></vue-qr>
                <p id="ewm1">
                    {{companyName}}
                </p>
            </div>
            <!-- <div class="bottom-content">
                <img src="../../../assets/personal/images/sxgx-pic.png" alt="">
                <p class="b-text"> 一款上线首月即拥有百万粉丝流量的商家免费引流微信公众平台</p>
                <p class="b-text"> 这是商家的引流增销平台，全方位锁定用户消费及转介绍 </p>
                <p class="b-text">这是用户的自由创业平台，全方位锁定资源并将资源变现</p>
            </div> -->
        </div>
         <img id="predict_img" class="hide">
        <!--<div class="backTo" onclick="javascript:history.back(-1);">返回</div>-->
         <div class="LongPress" v-show="LongPress">
            长按可保存打印收款码
        </div>
    </div>
</template>
<style scoped>
    @import "../../../assets/personal/css/share_qrcode.css";
    .LongPress{
        font-size: 32px;
        color: #7FB4FB;
        position: fixed;
        bottom: 10%;
        width: 100%;
        text-align: center;
    }
    #predict_img{
        /* height:100%; */
        width: 100%;
    }
    .jinqian {
        margin-left: 6rem;
    }
    .bg {
        height: 100%;
        background: #ffffff;
    }
    .share-content {
        height: 100%;
    }
    #share_Style{
        background: url("../../../assets/business/images/shops_bgqr.png")no-repeat center center;
        background-size:100% 100%;
        height: 70%;
        width: 100%;
    }
    #ewm{
         padding: 10px;
         background: #ffffff;
         width: 50%;
         position: fixed;
         top: 40%;
         left: 25%;
         position: relative;
    }
    #ewm1{
        position: absolute;
        font-size: 18px;
        width:50%;
        color: #ffffff;
        font-weight: 700;
        text-align: center;
        left: 25%;
        top:61.5%;
    }
</style>
<script>
    import VueQr from 'vue-qr'
   // import wx from 'weixin-js-sdk'
    import html2canvas from 'html2canvas';
    export default {
        components: {
            VueQr
        },
        data() {
            return {
                companyID: "",
                uid: '',
                text:"http://" + window.location.host + "/wap/wx/login?fk=1-2-" + this.$route.params.id + "-" + this.$route.params.cmid,
                src2:require("../../../assets/personal/images/logo_new.png"),
                srcasd:require("../../../assets/logo.png"),
                showQrcode:true,
                companyName:this.$route.params.companyName,
                showQrcode:true,
                LongPress:false
          }
        },
        created(){
             this.uid = this.$route.params.id;
             this.companyID = this.$route.params.cmid;
             this.companyName=this.$route.params.companyName
        },
        methods: {
            test(dataUrl,id){  
                setTimeout(() => {
                      html2canvas(document.body, {scale:2,logging:false,useCORS:true}).then(function(canvas) {
                    document.querySelector("#capture").appendChild(canvas);
                    var dataUrl = canvas.toDataURL();
                    $("#predict_img").attr("src",dataUrl).removeClass("hide"); 
                }); 
                 this.LongPress=true;
                 this.showQrcode=false;
                }, 500);
                
            },
            // qrcode() {
               
            //     QRCode.toDataURL("http://" + window.location.host + "/wap/wx/login?fk=1-2-" + this.companyID + "-" + this.uid )//this.companyID   this.uid 
            //         .then(url => {
            //             document.getElementById("qrcodeimg").src = url;
            //         })
            //         .catch(err => {
            //             console.error(err)
            //         })
            // },
            getwxconfig() {
                var vm = this;
                this.$http.get(this.APIURL_PREFIX + "/api/wxs/config?url=" + escape(location.href.split('#')[0])).then((response) => {
                    console.log(response.data);
                    var appid = 'wx488ae3f57360b7ea';
                    wx.config({
                        debug: false,
                        appId: appid,
                        timestamp: response.data.data.timestamp,
                        nonceStr: response.data.data.noncestr,
                        signature: response.data.data.signature,
                        jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone', 'scanQRCode']
                    });
                    wx.ready(function () {
                        wx.onMenuShareTimeline({
                            title: "我是首象用户，我为首象代言",
                            link: "http://" + window.location.host + "/wap/wx/login?fk=1-2-" + vm.companyID + "-" + vm.uid,//vm.uid   //  vm.companyID
                            imgUrl: app.imgSrc,
                            desc: " 首象共享，一款上线首月即拥有百万粉丝流量的商家免费引流微信公众平台",
                            success: function () {
                            },
                            cancel: function () {
                            }
                        });
                        wx.onMenuShareAppMessage({
                            title: "我是首象用户，我为首象代言",
                            link: "http://" + window.location.host + "/wap/wx/login?fk=1-2-" + vm.companyID + "-" + vm.uid,
                            imgUrl: app.imgSrc,
                            desc: " 首象共享，一款上线首月即拥有百万粉丝流量的商家免费引流微信公众平台",
                            success: function () {
                            },
                            cancel: function () {
                            }
                        });
                        wx.onMenuShareQQ({
                            title: "我是首象用户，我为首象代言",
                            link: "http://" + window.location.host + "/wap/wx/login?fk=1-2-" + vm.companyID + "-" + vm.uid,
                            imgUrl: app.imgSrc,
                            desc: " 首象共享，一款上线首月即拥有百万粉丝流量的商家免费引流微信公众平台",
                            success: function () {
                            },
                            cancel: function () {
                            }
                        });
                        wx.onMenuShareWeibo({
                            title: "我是首象用户，我为首象代言",
                            link: "http://" + window.location.host + "/wap/wx/login?fk=1-2-" + vm.companyID + "-" + vm.uid,
                            imgUrl: app.imgSrc,
                            desc: " 首象共享，一款上线首月即拥有百万粉丝流量的商家免费引流微信公众平台",
                            success: function () {
                            },
                            cancel: function () {
                            }
                        });
                        wx.onMenuShareQZone({
                            title: "我是首象用户，我为首象代言",
                            link: "http://" + window.location.host + "/wap/wx/login?fk=1-2-" + vm.companyID + "-" + vm.uid,
                            imgUrl: app.imgSrc,
                            desc: " 首象共享，一款上线首月即拥有百万粉丝流量的商家免费引流微信公众平台",
                            success: function () {
                            },
                            cancel: function () {
                            }
                        });

                    });
                }).catch(function (err) {
                    console.log(err)
                });

            }

        },
        mounted() {
            this.getwxconfig();
        },
    }
</script>
